<template>
  <view class="bookshelf-container">
    <scroll-view scroll-y="true" class="bookshelf-scroll">
      <view v-for="(book, index) in data" :key="index" class="book-item" @longpress="showDeleteButton = { index }" @touchend="showDeleteButton" @delete-book="handleDeleteBook(index)" @tap="pik(book.bookId)">
        <image :src="book.bookImg" class="book-cover"></image>
        <view class="book-info">
          <text class="book-title">{{ book.bookName }}</text><br>
          <text class="book-author">{{ book.bookAuthor }}</text><br>
        </view>
		<button v-if="showDeleteButton && showDeleteButton.index === index" class="delete-button" @tap="handleDeleteBook(index)">删除</button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import http from "/pages/utils/request.js"
	import {useUserInfoStore} from "/pages/stores/userInfo.js"
	const userStore = useUserInfoStore()
export default {
  data() {
    return {
		data:[],
	    showDeleteButton: true,
    };
  },
  onShow() {
	// var ids = userStore.info.BookStarId.split(',')
	var ids = localStorage.getItem('id')
	// console.log(typeof ids);
  	const params = {
  		id:ids
  	}
  	console.log(params)
  	http.get("/user/getBooKshelfById",{params:params}).then(res => {
		this.data=res.data
		console.log(this.data);
	})
  },
  methods: {
      handleDeleteBook(index) {
        this.$emit('delete-book', index);
      },
	  pik(id){
		  console.log(id)
		  uni.navigateTo({
		  	url:'/pages/bookdetailed/bookdetailed?id='+id
		  })
	  }
    },
};
</script>

<style>
.bookshelf-container {
  background-color: #f5f5f5;
  height: 100vh;
}

.bookshelf-scroll {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}

.book-item {
	display: inline-block;
  width: calc(33.33% - 20px);
  margin-bottom: 20px;
  margin-right: 20px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.book-cover {
  width: 210rpx;
  height: 300rpx;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.book-info {
	display: inline-block;
  padding: 10px;
}

.book-title {
	
  font-size: 22rpx;
  color: #333;
  line-height: 20px;
}

.book-author {
  font-size: 22rpx;
  color: #999;
  line-height: 20px;
}
</style>